<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!--
  Transparent text should not be eligible for LCP.
-->
<style>
  .large-transparent {
    font-size: 2000px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
    color: transparent;
    z-index: -999;
  }
</style>

<body>
  <img src='/images/lcp-133x106.png' id='lcp' />
  <p id="fake_lcp" class='large-transparent'>fake LCP</p>

  <script>
    const LcpEntryListPromise = (t) => {
      return new Promise(resolve => {
        new PerformanceObserver((entryList, observer) => {
          if (entryList.getEntries().length > 0) {
            resolve(entryList.getEntries());

            observer.disconnect();
          }
        }).observe({ type: 'largest-contentful-paint', buffered: true });
      });
    }

    promise_test(async t => {
      assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");

      lcpEntries = await LcpEntryListPromise();

      assert_equals(lcpEntries.length, 1, "There should only be 1 entry.");

      assert_true(lcpEntries[0].url.includes('lcp-133x106.png'), "The LCP entry should be the image.");
    }, "Transparent text should not be LCP.")
  </script>
</body>